<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="form"
      class="searchForm bg-gray flex flex-wp flex-a-c"
      size="small"
    >

      <el-form-item label="订单号">
        <el-input v-model.trim="form.orderSn" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="下单手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-select
          v-model="form.orderStatus"
          placeholder="请选择订单状态"
          filterable
          clearable
        >
          <el-option
            v-for="item in payTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
    </el-form>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          订单数量 {{ orderObj.orderNum }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          售出商品 {{ orderObj.orderProductNum }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-dark">
          订单金额 {{ formatNumber(orderObj.orderMoney) }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-last">
          支付金额 {{ formatNumber(orderObj.orderPayMoney) }}
        </div>
      </el-col>
    </el-row>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        prop="orderSn"
        label="订单编号"
        align="center"
        width="300"
      >
      </el-table-column>

      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          {{ StatusObj[scope.row.orderStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderMoney"
        label="订单金额"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="redPacketAmount"
        label="红包抵扣金额"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="paymentMoney"
        label="实付金额"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="itemNum"
        label="商品数量"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="下单手机号"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="buyerRemarks"
        label="备注信息"
        align="center"
      >
      </el-table-column>
      <el-table-column label="下单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.addTime ? new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="付款时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.payTime ? new Date(scope.row.payTime).Format('YYYY-MM-DD hh:mm:ss') : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            round
            @click="showDetail(scope.row.id)"
            >查看详情</el-button
          >
          <el-button
            v-if="scope.row.orderStatus === 2 && (scope.row.payConfirm === 0 || scope.row.payConfirm === 2)"
            size="mini"
            type="success"
            round
            @click="showPayConfirm(scope.row.id)"
            >打款确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="订单详情"
      :visible.sync="rateVisible"
    >
      <orderDetail :id="orderId"/>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="打款凭证"
      :visible.sync="payVisible"
    >
      <payConfirm :id="orderId"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">未到账</el-button>
        <el-button type="primary" @click="payConfirmData">确认无误</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import orderDetail from './orderDetail.vue'
import payConfirm from './payConfirm.vue'
export default {
  components:{
    orderDetail,
    payConfirm,
  },
  data() {
    return {
      orderId:0,
      form: {
        orderSn: '',
        phone: '',
        orderStatus: 0
      }, //搜索条件
      qdForm: {},
      payTypeList: [
        {
          label: '全部',
          value: 0,
        },
        {
          label: '待确认',
          value: -1,
        },
        {
          label: '待支付',
          value: 1,
        },
        {
          label: '待发货',
          value: 2,
        },
        {
          label: '待收货',
          value: 3,
        },
        {
          label: '取消交易',
          value: 8,
        },
        {
          label: '已完成',
          value: 9,
        },
      ],
      StatusObj: {
        '-1': '待确认',
        1: '待支付',
        2: '待发货',
        3: '待收货',
        8: '取消交易',
        9: '交易结束',
      },
      rangeTime: [],
      tableData: [], //表格数据
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      orderObj: {
        orderMoney: 0,
        orderNum: 0,
        orderPayMoney: 0,
        orderProductNum: 0,
      },
      rateVisible: false,
      payVisible: false
    }
  },
  beforeMount() {
    this.search()
  },
  methods: {
    //确定搜索条件
    search() {
      this.qdForm = { ...this.form }
      this.qdForm.startTime =
        this.rangeTime && this.rangeTime[0]
          ? this.rangeTime[0].Format('YYYY-MM-DD hh:mm:ss')
          : ''
      this.qdForm.endTime =
        this.rangeTime && this.rangeTime[1]
          ? this.rangeTime[1].Format('YYYY-MM-DD 23:59:59')
          : ''
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }
      this.getDataList()
      this.getOrderStatistics()
    },
    //获取表格数据
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/order/getList', params)
        .then((data) => {
          loading.close()
          this.tableData = data.resData?.data || []
          this.pageInfo.total = data.resData?.count || 0
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },

    // 获取统计数据
    getOrderStatistics() {
      let params = {
        ...this.qdForm
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/order/count', params)
        .then((data) => {
          loading.close()
          this.orderObj = data.resData
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    showDetail(id) {
      this.orderId = id
      this.rateVisible = true
    },
    showPayConfirm(id) {
      this.orderId = id
      this.payVisible = true
    },
    // 打款确认
    payConfirmData() {
      this.$confirm(`是否确定已收到打款?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/order/payConfirm", {
              id:this.orderId,
              type: 1
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `收款成功!`,
              });
              this.payVisible = false
              this.getDataList()
              this.getOrderStatistics()
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },
  },
}
</script>
<style lang="scss" scoped>
.actionTd {
  button {
    margin-bottom: 10px;
    min-width: 80px;
    margin-left: 10px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #58af5c;
}
.bg-purple {
  background: #458fe3;
}
.bg-purple-light {
  background: #ef7448;
}
.bg-purple-last {
  background: #a748ef;
}
.grid-content {
  border-radius: 4px;
  padding: 30px;
  font-size: 26px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
